<template>
    <div class="dorm-box">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/dorm-manager' }">公寓管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{buildNo}}号楼详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div>一行显示几个宿舍:<el-input v-model="rowNum" placeholder="请输入数值" style="width:120px"></el-input></div>
        <div>宿舍类型:
            <el-select v-model="dormtype" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.capacity"
                :label="item.dormType"
                :value="item.capacity">
                </el-option>
            </el-select>
        <el-button slot="append" icon="el-icon-search" @click="getDormDetail()"></el-button></div>
        注：红色为该宿舍已住满，无法进行删除和修改宿舍类型操作
        <div v-for="(j, index) in (0,Math.ceil(detailList.length/rowNum-0)+1)" style="overflow:hidden">
            <div v-for="(i, cindex) in (0,rowNum-0)"> 
                <div 
                 class="dormNoWarp"
                 :style="{'background': detailList[index*(rowNum-0)+cindex].countLive >= 0  && detailList[index*(rowNum-0)+cindex].countLive < detailList[index*(rowNum-0)+cindex].capacity ? 'skyblue':'red' }"
                 v-if="index*(rowNum-0)+cindex < detailList.length"
                 @click="openDetail(index*(rowNum-0)+cindex)"
                 >
                 {{detailList[index*(rowNum-0)+cindex].dormNo}}
                 <i class="el-icon-error" v-if="detailList[index*(rowNum-0)+cindex].countLive == 0" @click.stop="delDorm(index*(rowNum-0)+cindex)"></i>
                 </div>
            </div>
        </div>
        <el-button @click="batchDel()">批量删除</el-button>
        <!-- 寝室信息修改 -->
        <el-dialog
            title="寝室信息"
            :visible.sync="dormNoVisible"
            width="50%">
        <p>寝室号:{{dioDormNo}}</p>
        寝室人数:<el-input v-if="dioCountLive==0" v-model="dioCapacity"></el-input>
        <span v-if="dioCountLive!==0">{{dioCapacity}}</span> 

        <span slot="footer" class="dialog-footer">
            <el-button @click="dormNoVisible = false">取 消</el-button>
            <el-button v-if="dioCountLive!==0" @click="dormNoVisible = false">确认</el-button>
            <el-button type="primary" v-if="dioCountLive==0" @click="editDormNo()">确认修改</el-button>
        </span>
        </el-dialog>

    </div>
</template>
<script>
import request from "@/utils/request";
export default {
    name: 'DormManagerDetail',
    data() {
        return {
            buildNo:"",
            detailList:[],
            rowNum:4,
            delDormNo:'',
            batchDelDormNo:'',
            options:[{
                capacity:'8',
                dormType:'豪华8人寝'
            },
            {
                capacity:'4',
                dormType:'4人寝'
            },
            {
                capacity:'6',
                dormType:'6人寝'
            }],
            dormtype:'',
            dormNoVisible:false,
            dioDormNo:'',
            dioCapacity:'',
            dioCountLive:'',
        }
    },
    computed: {
        
    },
    mounted() {
        this.buildNo = this.$route.query.buildNo
        this.getDormDetail()
        
    },
    methods:{
        getIndex: function(index, cindex) {
         var ccIndex = index*(10)+cindex;
         console.log(ccIndex); 
         return ccIndex;
        },
        getDormDetail(){
            console.log(this.dormtype);
           var dormtype=this.dormtype
                console.log(dormtype);

            request({
                url: "/api/dormDetail/dormDetail",
                method: "post",
                data: {
                    buildNo:this.buildNo,
                    dormtype:dormtype
                }
            }).then(res => {
                if (res.status === 200) {
                    this.detailList = res.list;
                    console.log(this.detailList);
                }
            });
        },
        delDorm(row){
            this.$confirm('此操作将删除该宿舍, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delDormNo = this.detailList[row].dormNo
                console.log(this.delDormNo);
                request({
                    url: "/api/dormDetail/delDormNo",
                    method: "post",
                    data: {
                        delDormNo:this.delDormNo
                    }
                }).then(res => {
                if (res.status === 200) {
                    this.getDormDetail()
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
              }
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
    batchDel(){
        this.$prompt('请输入要删除的宿舍号,多个宿舍请用英文逗号间隔', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
        //    console.log(value.split(/,|，|\s+/)); 
            request({
                url: "/api/dormDetail/delDormNo",
                method: "post",
                data: {
                    delDormNo:value
                }
                }).then(res => {
                if (res.status === 200) {
                    this.getDormDetail()
                    this.$message({
                    type: 'success',
                    message: '已删除: ' + value
                });
                }
                })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    openDetail(row){
        console.log(this.detailList[row].dormNo)
        this.dormNoVisible=true,
        this.dioDormNo = this.detailList[row].dormNo,
        this.dioCapacity = this.detailList[row].capacity,
        this.dioCountLive = this.detailList[row].countLive

    },
    editDormNo(){
        
    }
    }
   
}
</script>
<style lang="scss" scoped>
.dorm-box{
    // background: pink;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.dormNoWarp{
  float:left;
  width: 60px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  margin: 10px;
  border:1px solid #000;
}
.bgc-blue{
float:left;
  width: 60px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  margin: 10px;
  background: blue;
  border:1px solid #000;
}
.bgc-skyblue{
    float:left;
  width: 70px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  margin: 10px;
  background: skyblue;
  border:1px solid #000;
}
.el-icon-error{
    cursor: pointer;
    color: rgba(0,0,0,0.12)
}
.el-icon-error:hover{
color: #000
}
</style>